<template>
  <div>
    <h2>分类列表</h2>
    <div class="List">
      <Child title="图片">
        <template #default>
          <img src="./assets/1.png" style="width: 100%" alt="" />
        </template>
        <template v-slot:footer>
          <a href="###">点击查看详情</a>
        </template>
      </Child>

      <Child title="电影">
        <template #default>
          <ul>
            <li>你的名字</li>
            <li>天气之子</li>
          </ul>
        </template>
        <template v-slot:footer>
          <button>更多电影请点击</button>
        </template>
      </Child>

      <Child title="???">
        <template #default> XXX </template>
        <template v-slot:footer>
          <p>哈哈哈哈</p>
        </template>
      </Child>
    </div>
  </div>
</template>

<script>
import Child from "@/components/Child";
export default {
  name: "App",
  components: { Child },
  data() {
    return {};
  },
};
</script>

<style>
.List {
  display: flex;
  justify-content: space-around;
}
</style>
